import React, { useState, useEffect } from 'react';
import Chart from './Chart';
import { mockScores } from '../mock/comprehensiveScoreData';
import { Text } from 'packages/ui-shared/src/atoms';

export interface ComprehensiveScoreChartProps {
  semester?: string;
}

const ComprehensiveScoreChart: React.FC<ComprehensiveScoreChartProps> = ({ 
  semester = '2023-2024第一学期' 
}) => {
  const [chartData, setChartData] = useState<any>(null);

  useEffect(() => {
    // 处理数据以适应图表显示
    const filteredScores = mockScores.filter(score => score.semester === semester);
    
    const labels = filteredScores.map(score => score.studentName);
    const academicScores = filteredScores.map(score => score.academicScore);
    const behaviorScores = filteredScores.map(score => score.behaviorScore);
    const activityScores = filteredScores.map(score => score.activityScore);
    const totalScores = filteredScores.map(score => score.totalScore);

    setChartData({
      bar: {
        labels,
        datasets: [
          {
            label: '学业成绩',
            data: academicScores,
            backgroundColor: 'rgba(54, 162, 235, 0.5)',
            borderColor: 'rgba(54, 162, 235, 1)',
            borderWidth: 1,
          },
          {
            label: '行为表现',
            data: behaviorScores,
            backgroundColor: 'rgba(75, 192, 192, 0.5)',
            borderColor: 'rgba(75, 192, 192, 1)',
            borderWidth: 1,
          },
          {
            label: '活动参与',
            data: activityScores,
            backgroundColor: 'rgba(255, 206, 86, 0.5)',
            borderColor: 'rgba(255, 206, 86, 1)',
            borderWidth: 1,
          },
        ],
      },
      line: {
        labels,
        datasets: [
          {
            label: '总积分趋势',
            data: totalScores,
            fill: false,
            backgroundColor: 'rgba(153, 102, 255, 0.5)',
            borderColor: 'rgba(153, 102, 255, 1)',
            tension: 0.1,
          },
        ],
      },
      pie: {
        labels: ['优秀', '良好', '中等', '及格'],
        datasets: [
          {
            data: [
              filteredScores.filter(s => s.evaluation === '优秀').length,
              filteredScores.filter(s => s.evaluation === '良好').length,
              filteredScores.filter(s => s.evaluation === '中等').length,
              filteredScores.filter(s => s.evaluation === '及格').length,
            ],
            backgroundColor: [
              'rgba(54, 162, 235, 0.5)',
              'rgba(75, 192, 192, 0.5)',
              'rgba(255, 206, 86, 0.5)',
              'rgba(255, 99, 132, 0.5)',
            ],
            borderColor: [
              'rgba(54, 162, 235, 1)',
              'rgba(75, 192, 192, 1)',
              'rgba(255, 206, 86, 1)',
              'rgba(255, 99, 132, 1)',
            ],
            borderWidth: 1,
          },
        ],
      },
    });
  }, [semester]);

  const chartOptions = {
    responsive: true,
    maintainAspectRatio: false,
    plugins: {
      legend: {
        position: 'top' as const,
      },
      title: {
        display: true,
        text: '学生综合评分分析',
      },
    },
    scales: {
      y: {
        beginAtZero: true,
      },
    },
  };

  if (!chartData) {
    return (
      <div className="flex items-center justify-center h-64 bg-gray-50 rounded-lg">
        <Text className="text-gray-500">加载中...</Text>
      </div>
    );
  }

  return (
    <div className="space-y-6">
      <Text className="text-xl font-bold">{semester} 学生综合评分</Text>
      
      <div className="grid grid-cols-1 lg:grid-cols-2 gap-6">
        <div className="bg-white p-4 rounded-lg shadow h-80">
          <Text className="text-lg font-semibold mb-2">各项评分对比</Text>
          <Chart type="bar" data={chartData.bar} options={chartOptions} />
        </div>
        
        <div className="bg-white p-4 rounded-lg shadow h-80">
          <Text className="text-lg font-semibold mb-2">总积分趋势</Text>
          <Chart type="line" data={chartData.line} options={chartOptions} />
        </div>
        
        <div className="bg-white p-4 rounded-lg shadow h-80">
          <Text className="text-lg font-semibold mb-2">评价等级分布</Text>
          <Chart type="pie" data={chartData.pie} options={chartOptions} />
        </div>
      </div>
    </div>
  );
};

export default ComprehensiveScoreChart;